<template>
  <div class="card-page">
    <tool-bar nav="" :title="action_name + 'K8s同步设置'">
      <el-button size="small" @click="$router.push('/sys/k8s-sync-setting/add')" v-if="$props.action=='edit'">新建
      </el-button>

      <el-button size="small" @click="clone_click" v-if="$props.action=='edit'">克隆
      </el-button>
      <el-button size="small" @click="save_click" type="primary">保存</el-button>
    </tool-bar>

    <el-row :gutter="12" style="width: 100%;" justify="space-around">
      <el-col :span="11">

        <kv label="配置名称">
          <el-input v-model="info.name" chk="*"/>
        </kv>
      </el-col>
    </el-row>
    <el-row :gutter="12" style="width: 100%;" justify="space-around" class="split-line">
      <el-col :span="11" style="position: relative;">
        <div v-if="info.isActive" class="current-set">
          当前
        </div>


        <el-tabs type="border-card">

          <el-tab-pane label="Test服务器">

            <fieldset>
              <legend>ssh配置</legend>
              <ref-ssh-config v-model="info.testSsh"></ref-ssh-config>
            </fieldset>

            <kv label="Test仅推送脚本">
              <el-input type="textarea" :rows="6" v-model="info.testPushScript"/>
            </kv>

            <kv label="Prod部署脚本">
              <el-input type="textarea" :rows="6" v-model="info.prodDeployScript"/>
            </kv>
          </el-tab-pane>

        </el-tabs>


      </el-col>
      <el-col :span="11">

        <el-tabs type="border-card">
          <el-tab-pane label="生产服务器">


            <fieldset>
              <legend>k8s</legend>
              <ref-k8s-config v-model="info.prodK8s"></ref-k8s-config>
            </fieldset>

            <fieldset>
              <legend>registry信息</legend>
              <ref-reg-config v-model="info.prodRegistry"></ref-reg-config>
            </fieldset>

          </el-tab-pane>

        </el-tabs>

      </el-col>
    </el-row>


  </div>
</template>

<script setup>
/**
 * Created by CodeGenerator  at 2024-09-02 02:19:55
 */
import RefK8sConfig from "./ref-k8s-config.vue"
import RefSshConfig from "./ref-ssh-config.vue"
// import RefSshProdServerConfig from "./ref-k8s-config.vue"
import RefRegConfig from "./ref-reg-config.vue"


//定义 vue2的this,当前组件
let $self = getCurrentInstance();

//定义 $attrs
let $attrs = useAttrs()


//定义事件
let $emit = defineEmits(["update:modelValue", "loaded"]);

//定义属性
var $props = defineProps({
  id: {type: String, default: ""},
  action: {type: String, default: ""}
});
const action_name = $computed(() => {
  return {add: "添加", edit: "修改"}[$props.action]
});

//定义data
let $data = reactive({
  info: {
    testServer: {},
    uatServer: {},
    prodServer: {},
  }, //子对象需要声明。

})


const info = $computed(() => $data.info)

/**
 * 加载数据
 * @returns {Promise<void>}
 */
const loadData = async () => {
  if (!$props.id) return;
  let res = await jv.$http.post("/sys/k8s-sync-setting/detail/" + $props.id)
  $data.info = res.data.data;
}

const clone_click = async function () {
  $data.info.id = "";
  $data.info.name = $data.info.name + "-clone"
  $data.info.isActive = false;
  save_click();
};


/**
 * 保存数据
 */
const save_click = async () => {
  //校验
  if (jv.chk_main() == false) {
    return;
  }

  let res = await jv.$http.post("/sys/k8s-sync-setting/save", $data.info)
  //[axios拦截器中已处理了异常]。

  jv.info(action_name + " 成功");
  let id = res.data.data || $data.info.id;
  if (!id) {
    return jv.error("找不到 id");
  }
  jv.$router.push("/sys/k8s-sync-setting/edit/" + id);
}


onMounted(() => {
  loadData();
})

</script>

<style scoped lang="scss">

.current-set {
  position: absolute;
  right: 20px;
  z-index: 999;
  top: 7px;
  background-color: rgb(142 41 142);
  color: white;
  font-size: larger;
  border-radius: 8px;
  padding: 3px 6px;
}

::v-deep(.kv) {
  flex-direction: column;

  .k {
    justify-content: flex-start;
  }
}

.split-line:after {
  content: " ";
  display: block;
  width: 1px;
  position: absolute;
  top: 10px;
  background-color: rgb(173 181 189);
  bottom: 10px;
}
</style>
